<template>
    <v-chart :options="liquidOptions"></v-chart>
</template>

<script>
import commonDataMixin from '@/mixins/commonDataMixin'
function getColor(value) {
    return value > 0 && value <= 0.5 ? 'rgba(97,216,0,.7)'
      : value > 0.5 && value <= 0.8 ? 'rgba(204,178,26,.7)'
        : value > 0.8 ? 'rgba(241,47,28,.7)' : '#c7c7cb'
}

export default {
    mixins: [commonDataMixin],
    watch: { 
        userGrowth() { 
            this.getLiquidOptions()
        }
    },
    data() {
        return {
            liquidOptions: {}
        };
    },

    mounted() {
       
    },

    methods: {
        getLiquidOptions() {
            this.liquidOptions = { 
                series: [{
                    type: 'liquidFill',
                    data:  [this.userGrowth],
                    name: '用户同月比增长',
                    color:[getColor(this.userGrowth)],
                    radius: '90%',
                    itemStyle: {
                        opacity: 0.6
                    },
                    emphasis: {
                        itemStyle: {
                            opacity: 0.4
                        }
                    },
                    backgroundStyle: {
                        borderWidth: 1,
                        borderColor: '#999',
                        color: 'white'
                    },
                    outline: {
                        show: false
                    },
                    label: {
                        fontSize: 36,
                        color: '#999'
                    }
                }],
                tooltip: {
                    show: true
                },
                
            }
        }
    },
};
</script>

<style lang="scss" scoped>

</style>